<template>
  <div id="order_detial">
    <div class="order_detial_code">
      <img class="order_detial_image" src="./assets/example.jpg"/>
      <span>订单二维码</span>
    </div>
    <!-- 订单号 订单姓名 地址 商品数 总金额 需要显示的按钮 这些变量需要从外部传入 -->
    <!-- order_number order_member order_address count sumPrice showButton  -->
    <MyOrder :orderType=3 :showButton=[] :orderItem="orderItem" />
    <div class="order_voucher"  v-if="orderItem.satatus === 1">
      <el-upload
        class="order_uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="order_uploader_img">
        <img src="./assets/ic_upload.png" v-else  class="order_uploader_img"/>
      </el-upload>
      <span v-show="imageUrl" >
        转账凭证已上传
      </span>
    </div>
    <div class="order_detial_button">
      <MyButton v-if="showButton.indexOf('退换货申请') !== -1" />
      <MyButton v-if="showButton.indexOf('确认付款') !== -1" isOrange text="确认付款"/>
    </div>
  </div>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css';
import Member from '_common/services/member'
import {getQuery} from '@/utils/utils'
import MyOrder from '../../components/order/order';
import MyButton from '../../components/button/button';
import wxLogin from '_common/wxLogin.js'
// orderType
export default {
  	name: 'order_detial',
  	data() {
  		return {
          orderId: null,
          orderItem: {},
          dialogImageUrl: '',
          dialogVisible: false,
          imageUrl: ''
  		}
    },
    props: {
      showButton: {
        type: Array,
        default: function () {
          return ["退换货申请","确认付款"]
        }
      },
      //  转账凭证是否已经上传
      isUpdate: {
        type: Boolean,
        default: true
      }
    },
    created () {
    },
    async beforeMount() {
      await wxLogin(this.getData)
    },
  	computed: {
  	},
  	methods: {
      getData() {
        this.orderId = getQuery('orderId') || 1
        this.getOrderDetail()
      },
  	  getOrderDetail () {
        Member.getOrderDetail(this.orderId).then(res => {
          if(res && res.code === 0) {
            this.orderItem = res.data
          }
        }, reject => {
          this.$alertTip()
        })
      },
      handleAvatarSuccess(res, file) {
        // 在这里处理图片上传～
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    mounted(){
    },
    components: {
      MyOrder,
      MyButton,
    }
}  
</script>

<style lang="less" scoped >
html {
  height: 100%;
  body {
    height: 100%;
    background-color: #f8f8f8;
    #order_detial {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .order_detial_code {
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 330px;
        .order_detial_image {
          margin-top: 48px;
          margin-bottom: 40px;
          width: 180px;
          height: 180px;
        }
        >span {
          font-size: 28px;
          color: #999999;
        }
      }
      .order_voucher {
        width: 100%;
        height: 240px;
        box-sizing: border-box;
        padding: 0 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        >img {
          width: 120px;
          height: 120px;
        }
        >span {
          font-size: 28px;
          color: #333333;
        }
      }
      .order_detial_button {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: white;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #eaeaea;
        height: 100px;
        align-items: center;
      }
    }

  }
}
.el-upload--text {
  width: 4rem;
  height: 4rem;
  border-radius: 6px;
  cursor: pointer;
}

.order_uploader_img {
  width: 4rem;
  height: 4rem;
  display: block;
}
</style>